<template>
  <el-button :icon="innerIcon" :type="innerType" @click="click">
    <slot>
      {{ text }}
    </slot>
  </el-button>
</template>

<script lang="ts" setup>
import { ButtonIcons } from './ButtonIcons'
import { EditType, EditTypeText } from '~/types/ui/EditType'
import { computed } from 'vue'

type btnType = '' | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'

const props = withDefaults(
  defineProps<{
    busType?: EditType | 'custom'
    //todo: icon 传递参数应该定义什么类型
    icon?: 'string' | object
    type?: btnType
  }>(),
  {
    busType: 'custom',
    icon: null,
    type: null
  }
)

const text = computed(() => {
  if (props.busType === 'custom') return ''
  return EditTypeText[props.busType]
})

const innerIcon = computed(() => {
  if (props.icon !== null) return props.icon
  switch (props.busType) {
    case 'insert':
      return ButtonIcons.insert
    case 'update':
      return ButtonIcons.update
    case 'view':
      return ButtonIcons.view
    case 'del':
      return ButtonIcons.del
    case 'query':
      return ButtonIcons.query
  }
})

const innerType = computed((): btnType => {
  if (props.type !== null) return props.type;
  switch (props.busType) {
    case 'insert':
    case 'query':
      return 'primary'
    case 'update':
    case 'view':
      return ''
    case 'del':
      return 'danger'
    default:
      return ''
  }
});

const emits = defineEmits(['click'])
const click = () => {
  emits('click')
}
</script>
